<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择员工</title>
    <link rel="shortcut icon" href="favicon.ico"> 
    <link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/plugins/dataTables/css/jquery.dataTables.min.css"/>
    <link rel="stylesheet" type="text/css" href="<%=path%>/hplus/js/plugins/sweetalert/sweetalert2.min.css">
<style> 
    #mydataTable{  
	   width: 100% !important;
	}  
	td,th{font-size:16px !important}
		

</style>
</head>
<body class="gray-bg">
    <div class="modal-header" style="padding: 15px 15px 10px;">
        <button type="button" class="close" data-dismiss="modal" onclick="userSelectQx();"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="text-left">选择员工</h4>
    </div>
        <div class="ibox-content">
              <div class="panel-body">
                      <div class="col-sm-2 s_title text-right" style="padding-top: 6px;">
                          <span style="font-size: 14px;">员工搜索</span>
                      </div>
                        <div class="col-sm-6 text-left">
                                <div class="input-group">
                                    <input id="searchRoleValue" type="text" placeholder="输入姓名、电话号码进行搜索" class="input form-control">
                                    <span class="input-group-btn">
                                        <button type="button" class="btn btn btn-primary" onclick="searchUser();" > <i class="fa fa-search"></i> 搜索</button>
                                    </span>
                                </div>
                        </div>
              </div>
             
        </div>
        <div id="roleTable" class="ibox-content">
            <table class="display  table-striped table-bordered table-hover" id="mydataTable">
                <thead>
                    <tr>
                       <td>
                          <div class="checkbox i-checks"><label class="select_all"><input  type="checkbox" ></label></div>
                       </td>
                        <th>姓名</th>
                        <th>部门</th>
                        <th>门店</th>
                        <th>手机</th>
                    </tr>
                </thead>
                <tbody>
                   
                </tbody>
            </table>
        </div>
        
       <div class="modal-footer" style="text-align:center;border-top:none;">
             <button type="button" class="btn btn-outline btn-primary" data-dismiss="modal" onclick="userSelectQx();">取消</button>
             <button type="button" class="btn btn-primary k_verify" onclick="getUserForParent();">确定</button>
       </div>
    <script type="text/javascript" src="<%=path%>/hplus/js/plugins/dataTables/jquery.dataTables.min.js"></script>
    <script type="text/javascript">
    var idsMap=new Map();
    var idsList=new Array();
    
    $('.select_all').on('ifChecked', function(event){
    	$(".childCheckbox").attr("checked","checked"); 
		$(".childCheckbox").parent().addClass("checked");
		idsList.length=0;
		$('.childCheckbox').each(function(i, d){
			var id=$(this).val();
			
			idsMap.set(id,id);
		})
		idsMap.forEach(function (element, index, array) {
 		    // element: 指向当前元素的值
 		    // index: 指向当前索引
 		    // array: 指向Array对象本身modelIds
 			 idsList.push(element);
 		});
    });
    
    $('.select_all').on('ifUnchecked', function(event){
    	$(".childCheckbox").removeAttr("checked","checked"); 
		$(".childCheckbox").parent().removeClass("checked");
		idsList.length=0;
		$('.childCheckbox').each(function(i, d){
			var id=$(this).val();
			idsMap.delete(id);
		})
		idsMap.forEach(function (element, index, array) {
 		    // element: 指向当前元素的值
 		    // index: 指向当前索引
 		    // array: 指向Array对象本身modelIds
 			 idsList.push(element);
 		});
    });
    
    $(document).on('ifChecked', '.childCheckbox', function() {
    	$(this).attr("checked","checked"); 
		$(this).parent().addClass("checked");
		var id=$(this).val();
		idsList.length=0;
		idsMap.set(id,id);
		idsMap.forEach(function (element, index, array) {
 		    // element: 指向当前元素的值
 		    // index: 指向当前索引
 		    // array: 指向Array对象本身modelIds
 			 idsList.push(element);
 		});
		
		var checkCount=0;
		var totalCoun=0;
		$('.childCheckbox').each(function(i, d){
			totalCoun++;
		})
		$('.checked').each(function(i, d){
			checkCount++;
		})
		if(checkCount==totalCoun){
			$('.select_all').children().addClass("checked");
			$('.select_all').children().children().attr("checked","checked"); 
		}
    });
    
    $(document).on('ifUnchecked', '.childCheckbox', function() {
    	$(this).removeAttr("checked","checked"); 
		$(this).parent().removeClass("checked");
		var id=$(this).val();
		idsList.length=0;
		idsMap.delete(id);
		idsMap.forEach(function (element, index, array) {
 		    // element: 指向当前元素的值
 		    // index: 指向当前索引
 		    // array: 指向Array对象本身modelIds
 			 idsList.push(element);
 		});
		$('.select_all').children().removeClass("checked"); 
		$('.select_all').children().children().removeAttr("checked"); 
		
    });
    
    var path = "<%=path%>";
    var myDataTable;
    $(function(){

        var arr = 0;
        $("input[name^='c']").each(function(){//each()方法遍历所有的复选框
            if($(this).is(':checked') == true){//这里就可以判断当前是否被选择了
                arr += 1;
            }
        })
        $("#count").text(arr);      
    	init();
    });
    
    function init(){
    	myDataTable = dataTable();
    }
    
    function func_dataTableReload(){
    	myDataTable.ajax.reload();
    }
    
    
    function dataTable(){
    	return $('#mydataTable').DataTable({
    		processing: true,
    		ordering: false,
    		searching: false,
    		info: true,
    		autoWidth: true,
    		lengthChange: false,
    		"order": [[ 2, "desc" ]],
    	    language: {
    	    	emptyTable: '<div id="content_empty"  class="form-group white-bg" style="text-align:center;padding:200px 0;margin:0;">   <p>暂无数据</p></div>',
    	    	info: '从第 _START_ 到第 _END_ 条数据；总共有 _TOTAL_ 条记录',
    			infoEmpty: '没有数据',
    			lengthMenu: '每页显示 _MENU_ 条记录',
    			loadingRecords: '正在加载数据....',
    			processing: '正在处理数据....',
    			zeroRecords: '没有找到匹配的记录',
    			paginate: {
    				first: '首页',
    				previous: '前页',
    				next: '后页',
    				last: '尾页'
    			}
    	    },
    	    order: [[1,'desc']],
    		pageLength: 10,
    	    pagingType: 'full_numbers',
    	    columnDefs: [{
    			render: function(data, type, full) {
    					return '<div class="checkbox i-checks" style="margin-left:8px;"><label class="is_checkd"><input class="childCheckbox" type="checkbox" value="'+data+'"></label></div>';
                },
    			targets: 0
    			}],
    	    columns: func_columns(),
    	    serverSide: true,
    	    ajax: {
    	    	contentType: 'application/json;charset=utf-8',
    	    	type: 'POST',
    	    	url: func_AjaxUrl(),
    	    	data: function(d){
    	    		//d.cid=cid;
    	    		d.extra_search = func_ajaxData();
    				return JSON.stringify(d);
    			}
    		},"initComplete": function(settings, json) {
    	    	$(".i-checks").iCheck({checkboxClass:"icheckbox_square-green",radioClass:"iradio_square-green",});
    	    }
    	}).on( 'draw', function () {
    		//不加这段查询后复选框会有问题
    		$(".i-checks").iCheck({checkboxClass:"icheckbox_square-green",radioClass:"iradio_square-green",});
    		$('.select_all').children().removeClass("checked"); 
    		$('.select_all').children().children().removeAttr("checked"); 
    		
    		var info=myDataTable.page.info(); 
        	//$('#count').html(info.recordsTotal);

    	} );
    	
    }
    
    function func_ajaxData() {
        var jsonObject = new Object();
         jsonObject.keyWord = $("#searchRoleValue").val();
         return jsonObject;
    }
    
    function func_AjaxUrl(){
    	 return path+"/account/ajaxAccountTableUserList";
    }
    /**		
     *	设置列名，对应后台
     */
    function func_columns(){
    	var jsonArr = [
    		{"data":"phone"},
    		{"data":"name"},
            {"data":"departmentName"},
            {"data":"stores"},
    		{"data":"phone"},
    	];
    	return jsonArr;
    }
    
    //搜索用户
    function searchUser(){
        func_dataTableReload();	
    }
    
    //获取父页面选择的全部用户编码，子页面选择的全部角色id，直接入库
    function getUserForParent(){
    	if(idsList == null || idsList == ""){
	    	promptDialog("请您选择用户！");
	    }else if(idsList.length > 5){
	    	promptDialog("所选用户请勿超过5个！");
	    }else{
		    var roleListArr = [];
		    for(var i=0;i<idsList.length;i++){
                roleListArr.push(idsList[i]);
		    }
		    //遍历用户选中的所有用户
		    for(var i=0;i<roleListArr.length;i++){
                if($("#phone1").val() == null || $("#phone1").val() == ""){
                    $("#phone1").val(roleListArr[i]);
                    continue;
                }
                if($("#phone2").val() == null || $("#phone2").val() == ""){
                    $("#phone2").val(roleListArr[i]);
                    $("#phoneDiv2").show();
                    continue;
                }
                if($("#phone3").val() == null || $("#phone3").val() == ""){
                    $("#phone3").val(roleListArr[i]);
                    $("#phoneDiv3").show();
                    continue;
                }
                if($("#phone4").val() == null || $("#phone4").val() == ""){
                    $("#phone4").val(roleListArr[i]);
                    $("#phoneDiv4").show();
                    continue;
                }
                if($("#phone5").val() == null || $("#phone5").val() == ""){
                    $("#phone5").val(roleListArr[i]);
                    $("#phoneDiv5").show();
                    continue;
                }
            }
            func_dataTableReload();
            idsMap = new Map();
            idsList = [];
            $("#user_modal").modal("hide");

	    }
    }

    //选择用户取消
    function userSelectQx(){
        func_dataTableReload();
        idsMap = new Map();
        idsList = [];
    }
    

    
    </script>
</body>
</html>
